<template>
  <!-- 底部购物车栏 -->
  <div class="fixed-bottom ">
    <!-- 快速下单/采购中心商品详情购物车 -->
    <div v-show="carType==='quickPlaceOrder'||carType==='purchase'" class="flex-s-s bottom-box pl-30">
      <div>
        <p class="fs-28">数量：<span class="color-warning"><b class="fs-36">{{ totalAmount }}</b></span></p>
        <p class="fs-28">合计：<span class="color-primary"><b class="fs-36">{{ totalMoney }}</b>元</span></p>
      </div>
      <button class=" bg-primary color-white btn fs-28" @click="submitBuy">去结算</button>
    </div>
  </div>
</template>

<script>
import { DeleteUserCar, AddOrUpdateAmount,AddOrEditUserCarList } from 'api/product'
import { GetBusinessFunction } from 'api/businessSetting'

export default {
  name: 'ShopCart',
  components: {
  },
  props: {
    carType: {
      type: String,
      required: false,
      default: 'quickPlaceOrder'
    },
    tel: {
      type: String,
      required: false,
      default: ''
    },
    storeId: {
      type: String,
      required: false,
      default: ''
    },
    shoplist: {
      type: Number,
      required: false,
      default: 0
    },
    postType: {
      type: Number,
      required: false,
      default: 0
    },
    carList: { // 购物车列表
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },
    shopData: { // 商品详情
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      showList: false,
      cartList: [],
      totalMoney: 0,
      totalAmount: 0,
      cartRequestList: [],
      switch203:0

    }
  },
  watch: {
    carList(newVal, oldVal) {
      this.cartList = newVal
      this.totalMoney = this.getTotalMoney()
      this.totalAmount = this.getTotalAmount()
    }
  },
  created() {
    this.cartList = this.carList
    this.totalMoney = this.getTotalMoney()
    this.totalAmount = this.getTotalAmount()
    this.GetBusinessFunction()
  },
  methods: {
    // 展示/隐藏购物车列表
    showCartList() {
      console.log('12')
      this.showList = !this.showList
    },
    GetBusinessFunction(){
      GetBusinessFunction(203).then(res => {
        if (res) {
          this.switch203 = res.Data[0].Value;
        }
      })
    },
    hiddenCartList() {
      console.log('隐藏')
      this.showList = false
    },
    changeAmount(item, num, stock, type, MinimumOrder) {
      console.log(item)
      const _oldAmount = item.Amount
      this.$utils.changeAmount(item, num, stock, type, MinimumOrder)
      if (_oldAmount !== item.Amount || type === 0) {
        const _obj = {}
        _obj.ProductId = item.ProductId
        _obj.Amount = item.Amount
        _obj.SkuId = item.SkuId
        if(this.shoplist==1){
          _obj.Source = 1
        }
        if(this.storeId){
          _obj.StoreId = this.storeId
        }
        this.cartRequestList = []
        this.cartRequestList.push(_obj)
        this.AddOrUpdateAmount(item.Amount)
      }
      item.TotalMoney = item.Amount * item.V_GradePrice
      this.totalMoney = this.getTotalMoney()
      this.totalAmount = this.getTotalAmount()
    },
    showSpec() {
      this.$emit('showSpec')
    },

    // 计算总额
    getTotalMoney() {
      let totalMoney = 0
      this.cartList.forEach(item => {
        totalMoney += item.TotalMoney
      })
      return totalMoney.toFixed(2)
    },

    // 计算总数量
    getTotalAmount() {
      let totalAmount = 0
      this.cartList.forEach(item => {
        totalAmount += parseInt(item.Amount)
      })
      return totalAmount
    },
    // 结算
    submitBuy() {
      if (this.cartList && this.cartList.length > 0) {
        let car_ids = ''
        let amount_str = '' // 这个数据有啥用？？？？？？？？？？？？？
        this.cartList.forEach(item => {
          if (item.IsLock === 0) {
            car_ids += item.ID + ','
            amount_str += item.Amount + ','
          }
        })
        if (!car_ids) {
          this.$toast('没有选中商品！')
          return false
        }
        if (car_ids.indexOf('undefined') >= 0) {
          this.$toast('选中的商品数据异常！')
          return false
        }
        localStorage.setItem('Wholesale_PayWay', 'car')
        localStorage.setItem('Wholesale_CarIds', car_ids)
        localStorage.setItem('Wholesale_Storeid', this.storeId)
        if(this.switch203==1){
          window.location.href = this.$LocalDomain + '/m/supplier/Car';
        }else{
          window.location.href = this.$LocalDomain + '/m/user/car';
        }
      }
    },
    // 去购物车页面
    goCart() {
      window.location.href = this.$LocalDomain + '/m/user/car'
    },

    // 清空购物车
    cleanCart() {
      let _ids = ''
      this.cartList.forEach((item, index) => {
        if (index === this.cartList.length - 1) {
          _ids += item.ID
        } else {
          _ids += item.ID + ','
        }
      })
      this.DeleteUserCar(_ids)
    },

    // 批量删除购物车商品api
    DeleteUserCar(ids) {
      DeleteUserCar({ ids }).then(res => {
        if (res) {
          console.log(res)
          this.$toast.success('删除成功')
          this.showList = false
          this.$emit('cleanCart')
        }
      })
    },

    // 更新购物车
    AddOrUpdateAmount(amount) {
      if(this.storeId){
        let param = {}
        param.list = this.cartRequestList
        AddOrEditUserCarList(param).then(res => {
          if (res) {
            console.log(res)
            // this.showList = false
            let _update = false
            if (amount === 0) {
              _update = true
            }
            this.$emit('updateCart', _update)
          }
        })
      }else{
        AddOrUpdateAmount(this.cartRequestList).then(res => {
          if (res) {
            console.log(res)
            // this.showList = false
            let _update = false
            if (amount === 0) {
              _update = true
            }
            this.$emit('updateCart', _update)
          }
        })
      }

    }
  }
}
</script>
<style lang="scss" scoped>
.bottom-box{
  position: relative;
  background: $colorF;
  height: 130px;
  z-index: 2;
  .shop-cart-out{
    border-radius: 100%;
    left: 54px;
    top: -20px;
    overflow: visible;
    .shop-cart-in{
      border-radius: 100%;
      left: 6px;
      top: 6px;
      overflow: visible;
      .shop-cart-num{
        font-size: 22px;
        line-height: 30px;
        padding: 0 10px;
        border-radius: 15px;
        color: $colorF;
        background:$red;
        top: 0;
        left: 60px;
        z-index: 12;
      }
    }
  }
  .btn{
    position: absolute;
    right: 23px;
    top: 25px;
    width: 220px;
    line-height: 80px;
    border-radius: 40px;
    text-align: center;
  }
  .cart-num{
    position: absolute;
    font-size: 18px;
    line-height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    color: $colorF;
    @include bg-primary;
    top: -5px;
    left: 36px;
    z-index: 12;
  }
  .left-btn,.right-btn{
    width: 238px;
    width:50%;
    display: inline-block;
    border-radius: 40px 0 0 40px;
  }

  .right-btn{
    border-radius:0 40px 40px 0;
  }
}
.bottom-box-1{
  height: 120px;
  .btn{
    top: 20px;
  }
}
.cart-popup{
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  .cart-shadow{
    height: 100%;
    width: 100%;
    background: $colorOverlay;
  }
  .cart-list-box{
    position: absolute;
    background: #fff;
    width: 100%;
    left: 0;
    bottom: 130px;
    border-radius: 20px 20px 0 0;
    .cart-tle{
      background: $colorF4;
      height: 80px;
      border-radius: 20px 20px 0 0;
      padding:0 25px;
    }
    .cart-list{
      max-height: 50vh;
      overflow: auto;
      position: relative;
      .cart-item{
        padding: 30px 0;
        .cart-spec{
          width:200px;
        }
        .btn-input-box{
          position: relative;
          margin: 0 4px;
          .btn-input{
            position: relative;
            z-index: 1;
            height: 56px;
            width: 50px;
            line-height: 1;
            border: none;
            text-align: center;
          }
        }
      }
    }
  }
}

.checkbox{
 padding-left: 75px;
 padding-right: 75px;
 &:before{
   left: 23px;
 }
 &:after{
   left: 35px;
 }
}
.tel-text{
  @include bg-primary;
  border-radius: 40px;
}
.fixed-bottom-60{
  bottom: 120px;
}
.fixed-bottom {
  box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
}
</style>
